<template>
<view class="open" v-show='isshow'>
	<view class="all"  @click='close'></view>
	<view class="bot" :class="isshow1?'top':'bottom'" :style="{'padding-bottom': (bottom+10) + 'rpx'}">
		<view class="btn_flex">
			<view class="qx" @click="cancel">
				取消
			</view>
			<view class="qd" @click="sure">
				确定
			</view>
		</view>
		<view class="flex_c">
			<view class="ss">
				<input type="text" placeholder="请输入关键词或项目名称" v-model="query.keywords" />
				<text @click="changeK">搜索</text>
			</view>
		</view>
		<view class="chain_list">
			<view class="chain_img" :class="{choose:data.id==item.id}" v-for="(item,index) in proList" :key='index' @click="toDetail(item,index)">
				<!-- <view class="name"> -->
					{{item.name}}
				<!-- </view> -->
			</view>
			<view class="none_img" v-if="proList.length==0">没有找到符合项目~</view>
		</view>
	</view>
</view>
</template>

<script>
	import {localprojects} from '../../utils/api.js'
	export default {
		props:['chainList'],
		name:"open",
		data() {
			return {
				isshow:false,
				isshow1:false,
				bottom:0,
				proList:[],
				indexList:[],
				data:'',
				query:{
					keywords:'',
				}
			};
		},
		created() {
			let that = this
			uni.getSystemInfo({
			    success: function (res) {
			        let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
			        model.forEach(item => {
			            //适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
			            if(res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
			                that.bottom = 40;
			            }
			        })
			    }
			});
			this.changeK()
		},
		methods:{
			changeK(){
				this.data=''
				localprojects.getList(this.query).then(res=>{
					this.proList = res.data.data
					console.log(res.data)
				})
			},
			show(){
				this.isshow=true
				this.$nextTick(()=>{
					this.isshow1=true
				})
			},
			close(){
				this.isshow1=false
				setTimeout(()=>{
					this.isshow=false
				},300)
			},
			toDetail(item){
				this.data = item
			},
			sure(){
				this.$emit('getPro',this.data)
				this.cancel()
			},
			cancel(){
				this.data = ''
				this.query.keywords=''
				this.close()
			},
		}
	}
</script>

<style scoped lang="scss">
	.choose::after{
		position: absolute;
		content: '已选择';
		color: #ff9933;
		font-weight: 800;
		font-size: 16px;
		text-align: center;
		line-height: 40px;
		border:1px solid #ff9933;
		width: 100%;
		height: 100%;
		background-color: rgba($color: #000000, $alpha: .5);
		z-index: 10;
		left: 0;
		top: 0;
		border-radius: 8px;
		// width: calc(50% - 20px) !important;
		// height: 70px !important;
	}
	.btn_flex{
		width: calc(100% - 24px);
		padding: 0 12px;
		height: 36px;
		line-height: 36px;
		border-bottom: 1px solid #d4d4d4;
		display: flex;
		justify-content: space-between;
		.qx{
			font-size: 18px;
			color: #666;
		}
		.qd{
			font-size: 18px;
			color: #3eb352;
		}
	}
.open{
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 101;
	background-color: rgba($color: #000000, $alpha: .5);
	.all{
		width: 100%;
		height: 100%;
	}
	.bot{
		position: absolute;
		z-index: 1001;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		// display: flex;
		// text-align: center;
		transition: all 0.3s;
		height: 70%;
		// padding: 10px 12px;
		.botL{
			height: calc(100% - 20px);
			width: 100%;
			overflow: auto;
		}
		.title_l{
			height: 36px;
			line-height: 26px;
			border-bottom: 2px solid #e5e5e5;
			color:#ff9933
		}
		.chain_list{
			width: calc(100% - 10px);
			height: calc(100% - 80px);
			overflow: auto;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin: 5px;
		}
		.chain_img{
			width: 100%;
			height: 40px;
			line-height: 40px;
			margin: 5px 0;
			position: relative;
			border-radius: 8px;
			box-shadow: 0 2px 2px 0 rgba($color: #000000, $alpha: .3);
			padding: 0 14px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			color: #333;
		}
	}
	.bottom{
		transform: translateY(100%);
	}
}
	.flex_c{
			width: 100%;
			// height: 44px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			background-color: #fff;
			box-shadow: 0px 2px 5px 0 #ddd;
			.ss{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				border-bottom: 1px solid #f0f0f0;
				margin: 0 10px;
				margin-bottom: 10px;
				position: relative;
				border: 2px solid #FA6400;
				border-radius: 16px;	
				input{
					width: calc(80% - 20px);
					padding-left: 20px;
					height: 32px;
				}
				text{
					// position: absolute;
					display: inline-block;
					right: calc(3% + 1px );
					height: 28px;
					line-height: 28px;
					border-radius: 14px;
					width: 60px;
					background: linear-gradient(90deg, #FE8E33 0%, #FC5517 100%);
					color: #fff;
					text-align: center;
					z-index: 10;
				}
			}
	}
	
</style>
